import React, { Component } from 'react';

import {BalanceStyled} from './BalanceStyled'

import Navigation from 'components/Navigation/Navigation'
import back from 'images/nav/whiteback@3x.png'
import mx from 'images/my/wd_mx@3x.png'

import UIButton from 'components/UIButton/UIButton'

class Balance extends Component {
  render() {
    return (
      <BalanceStyled>
        <Navigation
        title = "余额"
        leftMargin = '0 0 0 .15rem'
        leftWidth = '25%'
        leftHeight = '.44rem'
        leftImg = {back}
        leftImgWidth = '.2rem'
        clickLeft = {()=>this.onClickLeft()}
        ></Navigation>

        <img className="mx" src={mx} alt=""/>
        <p className="totalNum">总金额</p>
        <p className="number">
          <span className="bz">￥</span> 
          <span className="num">0.88</span>
        </p>

        <UIButton
        title='充值'
        width='1rem'
        height='.3rem'
        borderRadius='.05rem'
        backgroundColor = "#56D9D1"
        titleColor='#646464'
        titleSize = '.13rem'
        margin='.5rem 0 0 0'
        clickButton = {()=>this.onClickbtn(210)}
        ></UIButton>

        <UIButton
        title='提现'
        width='1rem'
        height='.3rem'
        borderRadius='.05rem'
        backgroundColor = "#56D9D1"
        titleColor='#646464'
        titleSize = '.13rem'
        margin='.1rem 0 0 0'
        clickButton = {()=>this.onClickbtn(211)}
        ></UIButton>
      </BalanceStyled>
    );
  }
  onClickLeft(){
    this.props.history.go(-1)

  }
  onClickbtn(tag){
    if(tag === 210){
      this.props.history.push('/myChildRouter/recharge')

    }else if(tag === 211){
      this.props.history.push('/myChildRouter/drawmoney')

    }
  }
}

export default Balance;